<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吕超英语海报裁剪工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 20px;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        header {
            background: linear-gradient(90deg, #4b6cb7, #182848);
            color: white;
            text-align: center;
            padding: 25px 20px;
            position: relative;
        }
        
        h1 {
            font-size: 2.4rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
        
        .header-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            font-weight: 400;
        }
        
        .dimension-badge {
            background: rgba(255, 255, 255, 0.15);
            padding: 5px 15px;
            border-radius: 20px;
            display: inline-block;
            margin-top: 12px;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 1px;
        }
        
        .content {
            display: flex;
            flex-wrap: wrap;
            min-height: 600px;
        }
        
        .panel {
            flex: 1;
            padding: 30px;
            min-width: 320px;
        }
        
        .control-panel {
            background: #f8f9ff;
            border-right: 1px solid #eaeef7;
            display: flex;
            flex-direction: column;
        }
        
        .preview-panel {
            background: #f0f3ff;
            display: flex;
            flex-direction: column;
        }
        
        .panel-title {
            font-size: 1.4rem;
            margin-bottom: 25px;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .panel-title i {
            color: #4b6cb7;
        }
        
        .upload-area {
            border: 2px dashed #a7b4e0;
            border-radius: 15px;
            padding: 40px 20px;
            text-align: center;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 30px;
        }
        
        .upload-area:hover {
            border-color: #4b6cb7;
            background: #fafbff;
        }
        
        .upload-area i {
            font-size: 3.5rem;
            color: #4b6cb7;
            margin-bottom: 20px;
        }
        
        .upload-area h3 {
            font-size: 1.4rem;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .upload-area p {
            color: #7f8c8d;
            font-size: 1rem;
            margin-bottom: 20px;
        }
        
        .btn {
            padding: 14px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .btn-primary {
            background: linear-gradient(90deg, #4b6cb7, #182848);
            color: white;
            box-shadow: 0 5px 15px rgba(75, 108, 183, 0.4);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(75, 108, 183, 0.6);
        }
        
        .btn-secondary {
            background: #eef2ff;
            color: #4b6cb7;
            border: 1px solid #c8d0f0;
        }
        
        .btn-secondary:hover {
            background: #e2e8ff;
        }
        
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .controls {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-top: auto;
        }
        
        .controls h3 {
            font-size: 1.2rem;
            margin-bottom: 20px;
            color: #2c3e50;
        }
        
        .control-group {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .control-group button {
            flex: 1;
        }
        
        .image-container {
            flex: 1;
            background: #2c3e50;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 400px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }
        
        .placeholder {
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            padding: 20px;
        }
        
        .placeholder i {
            font-size: 5rem;
            margin-bottom: 20px;
            display: block;
        }
        
        #image-preview {
            max-width: 100%;
            max-height: 100%;
            display: none;
        }
        
        .crop-box {
            position: absolute;
            border: 2px solid #ffd43b;
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
            cursor: move;
            display: none;
        }
        
        .crop-handle {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ffd43b;
            border-radius: 50%;
            z-index: 10;
        }
        
        .handle-nw { top: -10px; left: -10px; cursor: nw-resize; }
        .handle-ne { top: -10px; right: -10px; cursor: ne-resize; }
        .handle-sw { bottom: -10px; left: -10px; cursor: sw-resize; }
        .handle-se { bottom: -10px; right: -10px; cursor: se-resize; }
        
        .preview-container {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            margin-top: 25px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
        }
        
        .preview-header {
            padding: 15px;
            background: #f8f9ff;
            border-bottom: 1px solid #eaeef7;
            font-weight: 600;
            color: #4b6cb7;
        }
        
        .preview-content {
            padding: 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 200px;
        }
        
        #preview-canvas {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            display: none;
            max-width: 100%;
        }
        
        .size-indicator {
            margin-top: 15px;
            font-size: 0.9rem;
            color: #7f8c8d;
            background: #f8f9fa;
            padding: 8px 15px;
            border-radius: 20px;
            display: inline-block;
        }
        
        footer {
            text-align: center;
            padding: 25px;
            color: rgba(255, 255, 255, 0.85);
            font-size: 1rem;
            margin-top: 20px;
        }
        
        @media (max-width: 900px) {
            .content {
                flex-direction: column;
            }
            
            .control-panel {
                border-right: none;
                border-bottom: 1px solid #eaeef7;
            }
        }
        
        .instructions {
            background: #e3f2fd;
            border-left: 4px solid #4b6cb7;
            padding: 15px;
            border-radius: 0 8px 8px 0;
            margin: 20px 0;
            font-size: 0.95rem;
        }
        
        .instructions ul {
            padding-left: 20px;
            margin-top: 10px;
        }
        
        .instructions li {
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-crop-alt"></i> 吕超英语海报裁剪工具</h1>
            <p class="header-subtitle">自由调整裁剪区域，生成580x440像素的图片</p>
            <div class="dimension-badge">目标尺寸: 580x440 像素</div>
        </header>
        
        <div class="content">
            <div class="panel control-panel">
                <h2 class="panel-title"><i class="fas fa-sliders-h"></i> 操作面板</h2>
                
                <div class="upload-area" id="drop-area">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <h3>上传图片</h3>
                    <p>拖放图片到此处或点击下方按钮选择文件</p>
                    <p class="instructions">
                        <strong>支持格式:</strong> JPG, PNG, GIF<br>
                        <strong>最大尺寸:</strong> 5MB
                    </p>
                    <input type="file" id="file-input" accept="image/*" hidden>
                    <button class="btn btn-primary" id="select-btn">
                        <i class="fas fa-folder-open"></i> 选择图片
                    </button>
                </div>
                
                <div class="instructions">
                    <strong>使用说明：</strong>
                    <ul>
                        <li>上传图片后，裁剪框会出现在图片上</li>
                        <li>拖拽裁剪框可以移动位置</li>
                        <li>拖拽角落的控制点可以调整大小</li>
                        <li>裁剪框将保持 580x440 的比例</li>
                        <li>调整完成后点击"裁剪图片"按钮</li>
                    </ul>
                </div>
                
                <div class="controls">
                    <h3><i class="fas fa-tools"></i> 操作控制</h3>
                    <div class="control-group">
                        <button class="btn btn-secondary" id="reset-btn" disabled>
                            <i class="fas fa-redo"></i> 重置
                        </button>
                        <button class="btn btn-primary" id="crop-btn" disabled>
                            <i class="fas fa-crop-alt"></i> 裁剪图片
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="panel preview-panel">
                <h2 class="panel-title"><i class="fas fa-eye"></i> 预览面板</h2>
                
                <div class="image-container" id="image-container">
                    <div class="placeholder" id="image-placeholder">
                        <i class="fas fa-image"></i>
                        <p>上传图片后预览区域将显示在这里</p>
                    </div>
                    <img id="image-preview" alt="预览图片">
                    <div class="crop-box" id="crop-box">
                        <div class="crop-handle handle-nw"></div>
                        <div class="crop-handle handle-ne"></div>
                        <div class="crop-handle handle-sw"></div>
                        <div class="crop-handle handle-se"></div>
                    </div>
                </div>
                
                <div class="preview-container">
                    <div class="preview-header">
                        裁剪结果预览 (580x440)
                    </div>
                    <div class="preview-content">
                        <canvas id="preview-canvas" width="580" height="440"></canvas>
                        <div id="result-placeholder">
                            <i class="fas fa-cut" style="font-size: 3rem; color: #bdc3c7; margin-bottom: 15px;"></i>
                            <p style="color: #7f8c8d;">裁剪后的图片将显示在这里</p>
                        </div>
                        <a id="download-btn" class="btn btn-primary" style="display: none; margin-top: 20px;">
                            <i class="fas fa-download"></i> 下载图片
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <p>© 2025 吕超英语海报裁剪工具 | 设计尺寸: 580x440 像素</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // DOM元素
            const fileInput = document.getElementById('file-input');
            const selectBtn = document.getElementById('select-btn');
            const dropArea = document.getElementById('drop-area');
            const imagePreview = document.getElementById('image-preview');
            const imageContainer = document.getElementById('image-container');
            const cropBox = document.getElementById('crop-box');
            const cropBtn = document.getElementById('crop-btn');
            const resetBtn = document.getElementById('reset-btn');
            const previewCanvas = document.getElementById('preview-canvas');
            const downloadBtn = document.getElementById('download-btn');
            const imagePlaceholder = document.getElementById('image-placeholder');
            const resultPlaceholder = document.getElementById('result-placeholder');
            
            // 初始化变量
            let imageLoaded = false;
            let cropBoxX = 0;
            let cropBoxY = 0;
            let cropBoxWidth = 580;
            let cropBoxHeight = 440;
            const targetWidth = 580;
            const targetHeight = 440;
            const aspectRatio = targetWidth / targetHeight;
            
            // 选择图片按钮事件
            selectBtn.addEventListener('click', () => fileInput.click());
            
            // 文件选择事件
            fileInput.addEventListener('change', function(e) {
                if (this.files && this.files[0]) {
                    loadImage(this.files[0]);
                }
            });
            
            // 拖放事件处理
            dropArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.style.borderColor = '#4b6cb7';
                this.style.backgroundColor = '#f0f4ff';
            });
            
            dropArea.addEventListener('dragleave', function() {
                this.style.borderColor = '#a7b4e0';
                this.style.backgroundColor = 'white';
            });
            
            dropArea.addEventListener('drop', function(e) {
                e.preventDefault();
                this.style.borderColor = '#a7b4e0';
                this.style.backgroundColor = 'white';
                
                if (e.dataTransfer.files && e.dataTransfer.files[0]) {
                    loadImage(e.dataTransfer.files[0]);
                }
            });
            
            // 加载图片
            function loadImage(file) {
                if (!file.type.match('image.*')) {
                    alert('请选择图片文件 (JPG, PNG, GIF)');
                    return;
                }
                
                if (file.size > 5 * 1024 * 1024) {
                    alert('图片大小不能超过5MB');
                    return;
                }
                
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    imagePreview.src = e.target.result;
                    imagePreview.onload = function() {
                        imageLoaded = true;
                        imagePlaceholder.style.display = 'none';
                        imagePreview.style.display = 'block';
                        cropBtn.disabled = false;
                        resetBtn.disabled = false;
                        
                        // 初始化裁剪框
                        initCropBox();
                    };
                };
                
                reader.readAsDataURL(file);
            }
            
            // 初始化裁剪框
            function initCropBox() {
                const containerRect = imageContainer.getBoundingClientRect();
                const imgRect = imagePreview.getBoundingClientRect();
                
                // 计算容器中心位置
                cropBoxX = (containerRect.width - cropBoxWidth) / 2;
                cropBoxY = (containerRect.height - cropBoxHeight) / 2;
                
                // 设置裁剪框初始位置
                updateCropBox();
                cropBox.style.display = 'block';
            }
            
            // 更新裁剪框位置和尺寸
            function updateCropBox() {
                cropBox.style.width = `${cropBoxWidth}px`;
                cropBox.style.height = `${cropBoxHeight}px`;
                cropBox.style.left = `${cropBoxX}px`;
                cropBox.style.top = `${cropBoxY}px`;
            }
            
            // 裁剪框拖拽功能
            let isDragging = false;
            let dragStartX, dragStartY;
            
            cropBox.addEventListener('mousedown', function(e) {
                if (e.target === cropBox) {
                    isDragging = true;
                    dragStartX = e.clientX - cropBoxX;
                    dragStartY = e.clientY - cropBoxY;
                    cropBox.style.cursor = 'grabbing';
                }
            });
            
            document.addEventListener('mousemove', function(e) {
                if (!isDragging) return;
                
                const containerRect = imageContainer.getBoundingClientRect();
                
                // 计算新位置
                let newX = e.clientX - dragStartX;
                let newY = e.clientY - dragStartY;
                
                // 边界检查
                newX = Math.max(0, newX);
                newY = Math.max(0, newY);
                newX = Math.min(containerRect.width - cropBoxWidth, newX);
                newY = Math.min(containerRect.height - cropBoxHeight, newY);
                
                cropBoxX = newX;
                cropBoxY = newY;
                
                updateCropBox();
            });
            
            document.addEventListener('mouseup', function() {
                isDragging = false;
                cropBox.style.cursor = 'move';
            });
            
            // 缩放控制点功能
            const handleSE = document.querySelector('.handle-se');
            let isResizing = false;
            let resizeStartX, resizeStartY;
            
            handleSE.addEventListener('mousedown', function(e) {
                isResizing = true;
                resizeStartX = e.clientX;
                resizeStartY = e.clientY;
                e.stopPropagation();
            });
            
            document.addEventListener('mousemove', function(e) {
                if (!isResizing) return;
                
                const containerRect = imageContainer.getBoundingClientRect();
                
                // 计算尺寸变化
                const deltaX = e.clientX - resizeStartX;
                const deltaY = e.clientY - resizeStartY;
                
                // 计算新尺寸（保持宽高比）
                const newWidth = Math.max(100, cropBoxWidth + deltaX);
                const newHeight = newWidth / aspectRatio;
                
                // 边界检查
                if (cropBoxX + newWidth <= containerRect.width && 
                    cropBoxY + newHeight <= containerRect.height) {
                    cropBoxWidth = newWidth;
                    cropBoxHeight = newHeight;
                    updateCropBox();
                }
                
                resizeStartX = e.clientX;
                resizeStartY = e.clientY;
            });
            
            document.addEventListener('mouseup', function() {
                isResizing = false;
            });
            
            // 裁剪按钮事件
            cropBtn.addEventListener('click', function() {
                if (!imageLoaded) return;
                
                const ctx = previewCanvas.getContext('2d');
                previewCanvas.style.display = 'block';
                resultPlaceholder.style.display = 'none';
                downloadBtn.style.display = 'inline-flex';
                
                // 清除画布
                ctx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
                
                // 计算裁剪参数
                const imgRect = imagePreview.getBoundingClientRect();
                const containerRect = imageContainer.getBoundingClientRect();
                
                // 计算实际裁剪位置和尺寸
                const scaleX = imagePreview.naturalWidth / imgRect.width;
                const scaleY = imagePreview.naturalHeight / imgRect.height;
                
                const srcX = (cropBoxX - (imgRect.left - containerRect.left)) * scaleX;
                const srcY = (cropBoxY - (imgRect.top - containerRect.top)) * scaleY;
                const srcWidth = cropBoxWidth * scaleX;
                const srcHeight = cropBoxHeight * scaleY;
                
                // 执行裁剪
                ctx.drawImage(
                    imagePreview, 
                    srcX, srcY, srcWidth, srcHeight,
                    0, 0, targetWidth, targetHeight
                );
            });
            
            // 下载按钮事件
            downloadBtn.addEventListener('click', function() {
                const link = document.createElement('a');
                link.download = 'cropped-image.png';
                link.href = previewCanvas.toDataURL('image/png');
                link.click();
            });
            
            // 重置按钮事件
            resetBtn.addEventListener('click', function() {
                fileInput.value = '';
                imagePreview.src = '';
                imagePreview.style.display = 'none';
                cropBox.style.display = 'none';
                previewCanvas.style.display = 'none';
                downloadBtn.style.display = 'none';
                resultPlaceholder.style.display = 'block';
                imagePlaceholder.style.display = 'flex';
                cropBtn.disabled = true;
                resetBtn.disabled = true;
                imageLoaded = false;
            });
        });
    </script>
</body>
</html>